<template>
  <div class="home">
    <router-view />
    <div class="set"></div>
    <div class="footer">
      <nav>
        <router-link to="/index">
          <van-icon name="home-o" />
          <p>首页</p>
        </router-link>
        <router-link to="/class">
          <van-icon name="qr" />
          <p>分类</p>
        </router-link>
        <router-link to="/shop">
          <van-icon name="shopping-cart-o" />
          <p>购物车</p>
        </router-link>
        <router-link to="/my">
          <van-icon name="contact" />
          <p>我的</p>
        </router-link>
      </nav>
    </div>
  </div>
</template>

<script>
export default {};
</script>
<style lang="less" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.set {
  width: 100%;
  height: 55px;
  float: left;
}
.footer {
  z-index: 100;
  width: 100%;
  position: fixed;
  bottom: 0;
  background: white;
  font-size: 10px;
  .van-icon {
    font-size: 25px;
  }
}
nav {
  padding: 5px;
  display: flex;
  justify-content: space-evenly;
  text-align: center;
  position: absolute;

  a {
    font-weight: bold;
    color: #2c3e50;
    &.router-link-exact-active {
      color: red;
    }
  }
}
</style>
